@vonage/vvd-fonts

Vivid Fonts

As part of the One Vonage unified branding and look'n'feel experience, we are providing a common Web fonts set. Our font loading service will load a variable fonts for any supporting platform, while falling back to the static fonts on the non-supporting ones.

There are two API approaches to init the fonts in your application:

• JS/TS driven - import our module and invoke the API method
• CSS driven - link a single CSS stylesheet to rule them all

See more details about each of those approaches down below.

To use Vivid fonts in your application please apply the following CSS rule:

body {
	font-family: var(--vvd-font-family-spezia);
}

---

Support matrix

regular fonts	✔	✔	✔	✔	✔
variable fonts	✔ 62+	✔ 62+	✔ 17+	✔ 49+	✔ 11+

---

JS/TS driven initialization

If the JS/TS approach is taken, you should follow the example below:

import fonts from '@vonage/vvd-fonts';
...
fonts.init().then(() =>
	//	do post init stuff here
);

Note: this approach won't block site's contents rendering, so you'll most likely to experience FOUC behaviour unless employing some kind of loading vilon on start up.

---

CSS driven initialization

Link the vvd-fonts.css from the location you've put our library in. It is highly advised to link this resource early in the application lifecycle (for example, up in the head).

<link rel="stylesheet" href="@vonage/vvd-fonts/vvd-fonts.css" />

Note: this approach will block the site's contents rendering until the fonts are fully fetched, yet no FOUC (flash of unstyled content) expected.

Changelog

0.11.0 (2020-09-29)

Bug Fixes

• design tokens properties : vivid properties path reference (60ac4ef)

Features

• vwc-icon: added default size (397bb7e)
• vwc-icon: exported style to external scss (a0af301)
• vwc-icon: removed "size" from observed attributes (2b44f0f)